 <template>
        <!--登录-->
        <div>
            <div class="top-banner">
                <img src="../../assets/images/haha1.png" alt="">
            </div>
            <div class="title-line">
                <span class="tit">登录</span>
            </div>

            <!--main-->
            <div class="login-box">
                <div class="login-left">
                    <div class="qrcode-login">
                        <div class="qrcode-con">
                            <i class="tv-icon"></i>
                            <div class="qrcode-box">
                                <div class="qrcode-tips"></div> 
                                <div class="qrcode-img">
                                    <!-- <canvas width="140" height="140" style="display: none;"></canvas>
                                    <img style="display: block;" src=""> -->
                                </div>
                                <!--当时间超时，二维码失效时，display：block-->
                                <div class="status">
                                    <div class="overdue">点击刷新</div>
                                </div>
                            </div>
                        </div>
                        <div class="qrcode-footer">
                            <p class="status-txt">扫描二维码登录</p>
                            <p class="app-link">请使用 
                                <a href="//app.bilibili.com/" target="_blank">哔哩哔哩客户端</a><br>
                                扫码登录<br>
                                或扫码下载APP
                            </p>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="login-right">
                    <div class="form-login">
                        <div id="geetest-wrap" class="input-box">

                            <ul>

                                <el-tabs v-model="activeName" >
                                  <el-tab-pane label="密码登录" name="first">
                                    <div style="margin-top: 10px;">
                                      <el-input v-model="input" placeholder="你的手机号/邮箱"></el-input>
                                    </div>
                                    <div style="margin-top: 20px;">
                                      <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                                    </div>
                                  </el-tab-pane>
                                  <el-tab-pane label="短信登录" name="second">
                                    <div style="margin-top: 10px;">
                                      <el-input placeholder="填写常用的手机号" v-model="input3" class="input-with-select">
                                        <el-select v-model="select" slot="prepend" placeholder="中国大陆">
                                          <el-option label="餐厅名" value="1"></el-option>
                                          <el-option label="订单号" value="2"></el-option>
                                          <el-option label="用户电话" value="3"></el-option>
                                        </el-select>
                                      </el-input>
                                    </div>
                                    <div style="margin-top: 20px;">
                                      <el-input placeholder="请输入短信验证码" v-model="input2">
                                        <template slot="append">
                                          <el-row>
                                            <el-button type="primary" plain>获取验证码</el-button>
                                          </el-row>
                                        </template>
                                      </el-input>
                                    </div>
                                  </el-tab-pane>
                          
                                </el-tabs>



                                <li class="item gc  clearfix"></li> 
                                <li class="remember">
                                    <label>
                                        <input type="checkbox" @click="show">记住我
                                        <span>不是自己的电脑上不要勾选此项</span> 
                                        <a target="_blank" href="//passport.bilibili.com/register/findpassword.html#/verify" class="forget-password">忘记密码?</a> 
                                        <a target="_blank" href="//www.bilibili.com/blackboard/help.html#%E8%B4%A6%E5%8F%B7%E7%9B%B8%E5%85%B3" class="not-checkout">无法验证?</a>
                                    </label>
                                </li> 
                                <li class="btn-box">
                                    <a class="btn btn-login" @click="login">登录</a> 
                                    <!-- <a href="reigster/index.vue" class="btn btn-reg">注册</a> -->
                                    <router-link class="btn btn-reg" to="/register">注册</router-link>
                                </li> 
                                <li class="sns">
                            
                                    <a class="btn weibo"> 微博账号登录</a> 
                                    <a class="btn qq"> QQ账号登录</a>
                                </li> 
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--main end-->

        </div>
        <!--登录 end-->
</template>

<script>
 
   import {mapstate} from 'vuex'
export default {
    
    name: 'Login',
    data(){
        return{
            input:'',
            password:'',
            input3:'',
            input2:'',
            select:'',
            activeName: 'first',
            userinfo:{}
        }

  },
  mounted(){
     this.getstoreinfo()
  },
    methods:{
        getstoreinfo(){
           let userinfo =JSON.parse(localStorage.getItem('userinfo')) 
           this.userinfo =userinfo 
        },
        show(){
            console.log(this.password)
        },
         login(){
            
            if(this.userinfo.name===this.input && this.userinfo.password ===this.password){
              console.log('hha')  
               this.$router.push('/home')

            }
            
        }
        
    },
   
  

}
</script>

<style>
/*登录页面*/
.top-banner {
    background:khaki;
    height: 86px;
    text-align: center;
    margin-bottom: 20px;
}
.title-line{
    width: 800px;
    height: 28px;
    border-bottom: 1px solid cornflowerblue;
    display: block;
    margin: 0 auto 40px;
    position:relative; 
}
.title-line .tit {
        height: 56px;
        line-height: 56px;
        margin: 0 auto;
        padding: 0 20px;
        font-size: 38px;
        background-color: rgb(166, 186, 240);
        text-align: center;
        display:inline-block;
        position:absolute;
        left:300px;
        right:300px;
    }
.login-box{
    position: relative;
    width: 980px;
    height: 367px;
    margin: 0 auto;
}

.login-box .login-left{
    float: left;
    width: 489px;
    height: 100%;
}

.qrcode-login {
    position: relative;
    width: 480px;
    height: 100%;
}

.qrcode-login .qrcode-con {
    padding-top: 72px;
    width: 480px;
    height: 140px;
}

.qrcode-login .qrcode-con .tv-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 160px;
    top: 10px;
    /* background: url(../../assets/images/dianshi.png) no-repeat; */
}

.qrcode-login .qrcode-con .qrcode-box {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #ddd;
    position: relative;
}

.qrcode-login .qrcode-con .qrcode-box .qrcode-tips {
    z-index: 10;
    position: absolute;
    width: 480px;
    height: 192px;
    top: -50px;
    left: 50%;
    margin-left: -240px;
    background: url(../../assets/images/dianshi.png) no-repeat;
    background-size: cover;
    background-color: #fff;
    opacity: 0;
    transition: opacity .5s;
}

.qrcode-login .qrcode-con .qrcode-box .qrcode-img {
    width: 140px;
    height: 140px;
    background: url(../../assets/images/erweima.png) 50% no-repeat;
}

.qrcode-login .qrcode-con .qrcode-box:hover .qrcode-tips{
    opacity: 1;
}

.qrcode-login .qrcode-footer {
    width: 480px;
    height: 155px;
    background: url(../../assets/images/2233login.png) 0 -7px no-repeat;
}

.qrcode-login .qrcode-footer .status-txt {
    padding-top: 20px;
    text-align: center;
    color: #222;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

/* 当时间超时，二维码失效时 */
.qrcode-login .qrcode-con .qrcode-box .status{
    display: none;
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0,0%,100%,.8);
}
.qrcode-login .qrcode-con .qrcode-box .status .overdue {
    background: url(../../assets/images/icons.png) -1058px -170px no-repeat #fff;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.5);
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
    cursor: pointer;
    margin: 40px auto;
    width: 60px;
    padding: 40px 0 5px;
    color: #0594c7;
    text-align: center;
    background-size: 3200px 4888px;
}
/* 当时间超时，二维码失效时 end */


.qrcode-login .qrcode-footer .app-link, .qrcode-login .qrcode-footer .suc-txt{
    text-align: center;
    color: #717171;
    font-size: 14px;
}

.qrcode-login .qrcode-footer .app-link a{
    color: #6371ee;
}

.login-box .line {
    float: left;
    border-right: 1px solid #ddd;
    height: 300px;
    margin-top: 28px;
}

.login-box .login-right {
    float: left;
    padding-left: 45px;
    width: 490px;
    height: 313px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.form-login{
    position: relative;
}


 .el-select .el-input {
    width: 130px;
  }






.form-login .input-box {
    margin-top: 50px;
    width: 414px;
    height: 263px;
}

.status-box {
    position: relative;
}

.form-login .input-box .item input {
    width: 388px;
    border: 1px solid #ddd;
    color: #aaa;
    font-size: 14px;
    padding: 10px;
    height: 18px;
    vertical-align: middle;
    border-radius: 4px;
}

.form-login .input-box .item.gc {
    margin-bottom: 16px;
}

.status-box .status{
    display: none;
    /* background: url("") no-repeat ; */
    position: absolute;
    top: 8px;
    right: -25px;
    width: 20px;
    height: 20px;
}

.form-login .input-box .text {
    margin: 6px 0;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
}

.form-login .input-box .text .tips {
    color: #f66495;
    float: left;
}

.form-login .input-box .item.gc {
    margin-bottom: 16px;
}

.form-login .input-box .remember{
    margin: 10px 0;
    color: #717171;
    width: 410px;
    font-size: 12px;
}

.form-login .input-box .remember a{
    color: #00a1d6;
}

.form-login .input-box .remember span {
    color: #bbb;
    margin-left: 10px;
}

.form-login .input-box .remember .forget-password {
    float: right;
}

.form-login .input-box .remember .not-checkout {
    float: right;
    margin-right: 10px;
}

.form-login .input-box .btn-box .btn{
    color: #555;
    display: inline-block;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 184px;
    line-height: 38px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}

.form-login .input-box .btn-box .btn-login {
    border: 1px solid #0381aa;
    color: #fff;
    background-color: #00a7de;
}

.form-login .input-box .btn-box .btn-reg {
    margin-left: 34px;
}

.form-login .input-box .sns {
    padding: 12px 0;
    font-size: 12px;
}

.form-login .input-box .sns .btn {
    color: #717171;
}

.form-login .input-box .sns .btn.qq {
    margin-left: 20px;
}

.form-login .input-box .sns .btn:before {
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(../../assets/images/qq.png);
    vertical-align: middle;
    margin-right: 5px;
    background-size: 800px 1222px;

}

.form-login .input-box .sns .btn.qq:before {
    background-position: -489px -423px;
}

.form-login .input-box .sns .btn.weibo:before {
    background-position: -553px -457px;
}

/*登录页面 end*/
</style>

